<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>在线咨询</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="./css/online_ask.css"/>
    <style>
        .layer>header{
            position: fixed;
            top: 0%;
            height: 1.3rem;
            line-height: 1.4rem;
            padding-top: 0.4rem;
            background-color: #e8a94e;
            width: 100%;
            z-index: 1;
        }
        .layer>header>i{
            position: absolute;
            left: 3%;
            left: 3%;
            top: 35%;
            width: 0.6rem;
            height: 0.9rem;
            background: url("../img/w_left.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;

        }
        .layer>header>h3{
            text-align: center;
            font-size: 0.4rem;
            color: #ffffff;

        }
        .layer>header>em{
            position: absolute;
            right: 5%;
            top: 27%;
            font-size: 0.36rem;
            color:#fff;
        }

    </style>
</head>
<body>
<div class="layer">
    <div class="head">
         <span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
        <h1 class="titles">在线客服</h1>
    </div>
    <section>
        <div class="main clearfix">
         <div class="right f_right">
             <img src="img/513277.png" class="f_right" alt=""/>
             <div class="mess f_right">
                 Hi,您好
                 Hi,您好
                 Hi,您好
             </div>
         </div>
         <div class="left f_left">
             <img src="img/513277.png" class="f_left" alt=""/>
             <div class="mess f_left">
                 Hi,感谢你报名此职务~可能 无法及时回复消息，请见谅
             </div>
         </div>
    </div>
    </section>

    <div class="send">
        <input type="text" placeholder="发消息..." />
        <em class="m_send">发送</em>
    </div>
</div>
</body>
<script src="js/x_rem.js"></script>
<script src="js/all.js"></script>
<!--<script src="../../js/common/jquery.min.js"></script>-->
<!--<script src="../../js/common/base.js"></script>
<script src="../../js/common/back.js"></script>
<script src="../../js/common/sweetalert2.js"></script>
<script src="../../js/common/template-web.js"></script>
<script src="../../js/common/template.js"></script>-->
<!--<script>
    $(function () {

        var href=location.href.split("=")[1];
        console.log(href);
        var accid=localStorage.getItem("uName");
        function data(data){
            console.log(data);
        }
        myAjax({data:{accid:accid,faccid:href,type:1,msg:""},type:"post",url:"/im/addFriend"},data);
        $(".m_send").click(function () {
            //input的值
            var mess=$('.send>input').val();
            mess=$.trim(mess);
            console.log(mess);
            if(mess==''){
                sweetAlert(
                        'sorry',
                        '您不能发送空消息！',
                        'error'
                )
            }else{
               /* var html="<div class='right f_right'><img src='../../img/focus-img1.png'class='f_right'/><div class='mess f_right'>"+mess+"</div></div>";
                $('.main').append(html);
                $('.send>input').val("");*/
                sendMsg(mess);
                $('section').scrollTop($('.main')[0].scrollHeight);
                $('.send>input').val("");
            }
        })

        getSessionMsg();

        function getSessionMsg(){
            $.ajax({
                //处理session每次不唯一问题
                xhrFields: {
                    withCredentials: true
                },
                async:false,
                type: "post",
                url: baseUrl+"/im/querySessionMsg",
                data:{
                    to:href
                },
                dataType: 'json',
                success:function(data) {
                    //console.log(data);
                    if(data.msg.code==200){
                        //$('.chat_main').append(123);
                        console.log(data);
                        var from=localStorage.getItem("uName");
                        console.log(from);
                        data.msg.msgs=data.msg.msgs.reverse();
                        for(var i=0;i<data.msg.msgs.length;i++){
                            // $('.chat_main').append(456);
                            if(data.msg.msgs[i].from==from){
                                /*var html="<div class='right clearfix'><img src="+data.inAvatar+" class='f_right'/><div class='user_chat f_right'><span class=''>"+data.msg.msgs[i].body.msg+"</span> </div> </div>";*/
                                var html="<div class='right f_right'><img src='../../img/focus-img1.png' class='f_right'/><div class='mess f_right'>"+data.msg.msgs[i].body.msg+"</div></div>";
                                $('.main').append(html);
                               // console.log($("section").scrollTop());

                            }else{
                                /*var to="<div class='left clearfix'><img src="+data.toAvatar+" alt='' class='chat_info'/><div class='user_chat'> <span>"+data.msg.msgs[i].body.msg+"</span></div></div>";*/
                                var to="<div class='left f_left'><img src='../../img/focus-img1.png' class='f_left'/><div class='mess f_left'>"+data.msg.msgs[i].body.msg+"</div> </div>";
                                $('.main').append(to);
                            }
                            $(window).bind('scroll', function () {
                                //todo
                                console.info(window.scrollY)
                            })
                           /* $('section').scrollTop($('.main')[0].scrollHeight);*/
                            /*if(document.body.scrollHeight > window.innerHeight){
                                $('section').scrollTop($('.main')[0].scrollHeight);

                            }*/
                        }
                    }else{
                        sweetAlert(
                                'sorry',
                                '网络错误啦，请您重新登录!',
                                'error'
                        ).then(function(){
                                    location.href='./login.html'
                                })
                    }
                },error: function (msg) {
                    console.log(msg);
                }

            })
        }
        //刷新页面
        setInterval(function(){
            $(".main").html("");
            getSessionMsg();
        },3000);


        //发送普通消息
        function sendMsg(body){
            /*  var obj={};
             obj.ope=0;
             obj.type=0;
             obj.to=href;
             obj.body=body;*/
            //obj=JSON.stringify(obj);
            var obj={ope:0,type:0,to:href,body:"'"+body+"'"};
            //obj=JSON.stringify(obj);
            $.ajax({
                //处理session每次不唯一问题
                xhrFields: {
                    withCredentials: true
                },
                async:false,
                type: "post",
                beforeSend: function () {
                    $("#loading").show()
                },
                url: baseUrl+"/im/sendMsg",
                data:obj,
                /* {
                 ope:0,
                 type:0,
                 to:href,
                 body:{'msg':body}
                 },*/
                dataType: 'json',
                success:function(data) {
                    console.log(data);
                    if(data.code==200){
                        $("#loading").hide();
                        $(".main").html("");
                        getSessionMsg();
                    }else{
                        sweetAlert(
                                'sorry',
                                '网络错误啦，请您重新登录!',
                                'error'
                        ).then(function(){
                                    location.href='./login.html'
                                })
                    }

                }

            })
        }
         $('section').scrollTop($('.main')[0].scrollHeight);
    })
</script>-->
</html>